<template>
    <component v-if="customChart"
               v-bind:is="customChart"
               :config="config"
               :layoutItem="layoutItem"
    ></component>
</template>

<script>
//自定义图表
import Vue from 'vue';
import ChartPublic from '../formComponent/ChartPublic'
import {PublicFunction,Util} from "@lowcode/jpaas-common-lib"

export default {
    name: "customChart-component",
    props: {
        config: {
            type: Object
        },
        layoutItem:{
            type:Object
        }
    },
    data() {
        return {
            customChart:"",
            script:"",
            template:"<div class=\"wrap\">\n" +
                "        <div><filter-params @paramsChange=\"paramsChange\" :config=\"config\" :filterParams=\"config.filterParams\" ></filter-params></div>\n" +
                "        <div style=\"height: 100%\" :ref=\"config.alias\"></div>\n" +
                "    </div>"
        }
    },
    created() {
        this.init();
    },
    methods: {
        init(){
            let jsScript=this.config.jsScript;
            if(jsScript){
                jsScript=Util.replaceDefault(jsScript);
                this.script=eval('('+jsScript+')');
                this.customChart= Vue.component('customChart_'+this.config.alias, {
                    mixins: [ChartPublic,PublicFunction],
                    template: this.template,
                    ...this.script
                })
            }else {
                this.customChart="";
            }

        }
    },
    watch:{
        config:{
            handler: function (val, oldVal) {
                var self=this;
                setTimeout(function () {
                    self.init();
                },1000)
            },
            deep: true
        },
    }
}
</script>

<style scoped>
</style>